<template name="service">
	<view>
		<view class="main-box">
			<view class="jkfw">
				<view class="jkfw-text">健康服务</view>
				<view class="jkfw-image"></view>
			</view>
			<view class="khzxfw">
				<view class="khzxfw-t">
					<view class="khzxfw-l">客户专项服务</view>
					<view class="khzxfw-r" @click="fwClick">此9大服务可免费赠送好友></view>
				</view>
				<view class="khzxfw-b">
					<scroll-view scroll-x="true" class="scrollViews">
						<block v-for="(item,index) in listFw" :key="index">
							<view class="scrollView" @tap="fwZClick(item.page)">
								<view class="fw-text">
									{{item.name}}
								</view>
								<template v-if="item.content.length>0">
									<view class="fw-dg">
										<view class="fw-dg-c" v-for="(ite,indexs) in item.content" :key="indexs"
											@tap="detailClick(ite.pageChild)">
											<view class="fw-dg-c-1"
												:style="{'background':`url(${ite.picChild})`,'background-size': '100% 100%'}">

											</view>
											<view class="fw-dg-c-2">
												{{ite.nameChild}}
											</view>
										</view>
									</view>
								</template>
								<template v-else>
									<view class="fw-img"
										:style='"background:url("+item.pic+") no-repeat;width:240rpx;height:266rpx;background-size: 100% 100%;margin:12rpx 20rpx 0 20rpx;border-radius:14rpx;"'>
									</view>
								</template>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
			<view class="dljh">
				<view class="dljh-t">
					<view class="dljh-l">点亮计划</view>
					<view class="dljh-r" @click="planClick">查看更多></view>
				</view>
				<!-- 评估卡片 -->
				<view class="evaluation-card-box">
					<view class="every-evaluation-card" :style="{'background-image':`url(${item.healthPlanTheme})`}"
						v-for="(item,index) in listPlan" :key="index" v-if="index<3">
						<view class="card-information">
							<view class="evaluation-title">
								<text>
									{{item.healthPlanName}}
								</text>
							</view>
							<!-- <view class="appraisal-value text-line">
							{{item.healthPlanDesc}}
						</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="flzx">
				<view class="flzx-t">
					<view class="flzx-l">福利中心</view>
					<view class="flzx-r" @click="flClick">更多福利></view>
				</view>
				<view class="flzx-b">
					<view v-for="(item,index) in listFl" :key="index" class="flzx-b-c">
						<view class="flzx-b-c-1"
							:style="{'background':`url(${item.pic}) no-repeat`,'background-size': '100% 100%'}">
							<view style="position: relative;top: -10rpx;">
								<template v-if="item.title.indexOf('%s')!=-1">
									<u-parse :html="item.title.replace('%s',sportNum)"></u-parse>
								</template>
								<template v-else>
									<u-parse :html="item.title"></u-parse>
								</template>

							</view>
						</view>
						<view class="flzx-b-c-2">
							{{item.name}}
						</view>
						<view class="flzx-b-c-3">
							{{item.des}}
						</view>
						<template>
							<view class="flzx-b-c-4" v-if="item.type==1" @click="lQuClick(item)">
								{{item.buttonName}}
							</view>
							<button class="flzx-b-c-4" open-type="share" v-if="item.type==2">
								{{item.buttonName}}
							</button>
						</template>
					</view>
				</view>
				<view style="background-color: #f4f4f4;height: 15rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"

	export default {
		components: {
			uParse,
		},
		data() {
			return {
				sportFlag: 0, //
				code: '',
				encryptedData: '',
				iv: '',
				sportNum: 0,
				listFw: [{
						name: '用户特权',
						content: [{
								nameChild: '疾病自查',
								picChild: 'https://static.bsyjk.cn/fuwu/9180A73185B34E4BB678A1E3F8D0C8AA.png',
								pageChild: '/pages/subpackage/find/inquire/inquire'
							},
							{
								nameChild: '精品菜谱',
								picChild: 'https://static.bsyjk.cn/fuwu/F9CE14A67CA84AB7B2107F47D19CCCCC.png',
								pageChild: '/pages/subpackage/find/foodImage/foodImage'
							},
							{
								nameChild: '知识课堂',
								picChild: 'https://static.bsyjk.cn/fuwu/1BD36307D62041E09DEED095334EDC39.png',
								pageChild: '/pages/subpackage/find/classList/classList'
							},
							{
								nameChild: '家人互联',
								picChild: 'https://static.bsyjk.cn/fuwu/FC3B0D4330814BD1B4E4CA556A5B5DD3.png',
								pageChild: '/pagesHome/family-connectivity/family-internet-list'
							},
						],
						pic: '',
						page: ''
					},
					{
						name: '慢病评估专题',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/81D9DB60307B40108E8EF78E18618469.png',
						page: '/pagesHome/health-assessment/health-assessment'
					},
					{
						name: '健康报告解读',
						content: [],
						pic: 'https://static.bsyjk.cn/fw/00CAA7CA6ED1414797EF7D7EA6C4AA8E.png',
						page: '/pages/subpackage/home/HealthReport/HealthReport'

					},
					{
						name: '健康数据检测预警',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/CCD72E0185C44AEFB5F4FB25527AE4D9.png',
						page: '/pages/tab/home'
					},
					{
						name: '定制健康计划',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/3AE6E4DDD94044179EAE6E41FEC069A9.png',
						page: '/pagesHome/health-assessment/health-plan'
					},
					{
						name: '健康顾问私人服务',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/72201AE750AF4C34B5291E9D2C7DDD1A.png',
						page: '/pagesMy/my/counselor/counselor'
					},
					{
						name: '档案创建及分析',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/60DC2BE29B1746EEA03C50550E0D683D.png',
						page: '/pagesMy/health-records/health-records'
					},
				],
				listPlan: [{
						name: '科学有效的控制体重计划',
						pic: 'https://static.bsyjk.cn/fuwu/9F5C77DC0EB4431F8943C406AA3BB8E9.png'
					},
					{
						name: '一个月早睡计划',
						pic: 'https://static.bsyjk.cn/fuwu/E092D384314248D0A09EB59B83F0BC23.png'
					},
					{
						name: '戒烟计划',
						pic: ''
					},
				],
				listFl: [{
						title: '<view>今日步数 <text style="color: #67CA9D;font-size: 24rpx;">%s</text> 步</view>',
						type: 1,
						name: '走路赚钱',
						des: '步数兑换购物金、换购健康服务',
						buttonName: '立即领取',
						pic: 'https://static.bsyjk.cn/fuwu/7E415B6A265D49AC86B9703337B3E55C.png',
						pointDict: 'WALK_MAKE_MONEY'
					},
					{
						title: '新人 <text style="color: #ff0000;font-size: 24rpx;">1</text> 元包邮购',
						type: 2,
						name: '新人专享',
						des: '发送给好友一起来薅羊毛吧',
						buttonName: '邀请好友',
						pic: 'https://static.bsyjk.cn/fuwu/31C6FAC583B241F18E34873A99AD8CFE.png'
					}
				],
			}
		},
		onLoad() {
			this.healthPlanList();
			//获取微信运动步数
			this.getSportNum();
			// 配置分享
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			});
		},
		onPullDownRefresh() { //下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			//获取微信运动步数
			this.getSportNum();
			this.healthPlanList();
		},
		onShow() {
			this.getSportNum();
		},
		methods: {
			// aaa(){跳转小程序
			// 	wx.navigateToMiniProgram({
			// 	    appId: 'wx3cc80cbbb6a3b5f9',
			// 	    path: 'pages/home/home',
			// 	    envVersion: global.IS_DEV?'trial':'release',
			// 	    fail: function(res) {   
			// 	      console.info(res,"res取消")
			// 	      // wx.reLaunch({url: "/pages/tab/home"});//选择取消后，relaunch 到首页，否则会显示空白页面
			// 	        wx.navigateBack({
			// 	          delta : 1,
			// 	        })
			// 	    }
			// 	});
			// },
			//获取微信运动步数
			getSportNum() {
				let _this = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						_this.code = res.code
						uni.getWeRunData({
							success(res) {
								_this.sportFlag = 1
								_this.$https.get(global.apiUrls.getSportNum, {
									encryptedData: res.encryptedData,
									iv: res.iv,
									code: _this.code
								}).then(res => {
									let obj = JSON.parse(res.data.result)
									let arr = obj.stepInfoList
									console.log(arr, '------arr--------')
									_this.sportNum = arr[arr.length - 1].step
								})
							}
						});
					}
				});
			},
			lQuClick(item) {
				this.goToLogin()
				let _this = this
				if (_this.sportFlag == 0) {
					uni.openSetting({
						success(res) {
							console.log(res.authSetting)
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '今日只能领取一次,是否现在领取!',
						success: function(res) {
							if (res.confirm) {
								_this.$https.post(global.apiUrls.addPoint, {
									sportNum: _this.sportNum,
									pointDict: item.pointDict
								}).then(res => {
									_this.$message.info(res.data.message)
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//发送给朋友
			onShareAppMessage(res) {
				return {
					title: '新人 1 元包邮购',
					type: 0,
					// path: 'pages/subpackage/find/share/share?forumId=' + uni.getStorageSync('forumId'),
					// summary: "为了让你更健康，我想邀请你关联家人健康，让我每天为你守护",
					imageUrl: "https://static.bsyjk.cn/fw/C35272BB07E1415F9AC23671CF8B957D.jpeg"
				}
			},
			healthPlanList() {
				this.$https.get(global.apiUrls.healthPlanListNoUser, {}).then(res => {
					if (res.data.result) {
						this.listPlan = res.data.result;
					}
				})
			},
			//
			planClick() {
				this.goToLogin()
				this.$urouter.navigateTo({
					url: '/pagesHome/health-assessment/health-plan',
					params: {}
				});
			},
			fwClick() {
				this.$urouter.navigateTo({
					url: '/pagesB/fw',
					params: {}
				});
			},
			flClick() {
				this.$urouter.navigateTo({
					url: '/pagesB/fl',
					params: {
						sportFlag: this.sportFlag
					}
				});
			},
			detailClick(url) {
				console.log(url, '--name-------------')
				this.$urouter.navigateTo({
					url: url,
					params: {}
				});

			},
			fwZClick(url) {
				if (url.indexOf("tab") != -1) {
					uni.switchTab({
						url: url
					});
				} else {
					this.$urouter.navigateTo({
						url: url,
						params: {}
					});
				}
			},
			//去登录
			goToLogin() {
				this.$basejs.globaltoken();
			},
		}
	}
</script>
<style lang="scss">
	body {
		background-color: #fff;
	}

	.main-box {
		width: 750rpx;
		height: 748rpx;
		// height: 100vh;
		// background: url(https://static.bsyjk.cn/fuwu/4BB029AE73C141DA82CAD36870A7B740.png) no-repeat;
		background: linear-gradient(185.14deg, #FBF1E5 31.73%, #FBF2E3 56.08%, rgba(251, 242, 227, 0) 100.68%);
		background-size: 750rpx 748rpx;

		.jkfw {
			display: flex;
			justify-content: space-between;

			.jkfw-text {
				width: 50rpx;
				font-family: 'Alibaba PuHuiTi';
				font-style: normal;
				font-size: 54rpx;
				word-wrap: break-word;
				margin-left: 90rpx;
				margin-top: 154rpx;
				font-weight: 600;
			}

			.jkfw-image {
				width: 522rpx;
				height: 460rpx;
				background: url(https://static.bsyjk.cn/fuwu/F46ABB288F1D4374ADF08F7E7D6A20C7.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.khzxfw {
			.khzxfw-t {
				display: flex;
				justify-content: space-between;
				padding: 50rpx 24rpx 0 24rpx;

				.khzxfw-l {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 30rpx;
					line-height: 126.2%;
					letter-spacing: 0.4rpx;
				}

				.khzxfw-r {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 24rpx;
					line-height: 126.2%;
					letter-spacing: 0.4rpx;
					color: #FB9D25;
				}
			}

			.khzxfw-b {
				width: 750rpx;
				margin-top: 26rpx;
				overflow: hidden;

				.scrollViews {
					display: flex;
					white-space: nowrap;
					padding: 0 20rpx;

					.scrollView {
						width: 278rpx;
						height: 358rpx;
						background: linear-gradient(180deg, #F7E4CA 0%, #FFF9F5 100%);
						border-radius: 20rpx;
						display: inline-block;
						margin: 0 10rpx;
						overflow: hidden;

						.fw-text {
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 600;
							font-size: 28rpx;
							// line-height: 126.2%;
							letter-spacing: 0.4rpx;
							padding-top: 22rpx;
							padding-left: 22rpx;
						}

						.fw-dg {
							display: flex;
							flex-wrap: wrap;
							padding-top: 10rpx;
							justify-content: center;
							align-items: center;

							.fw-dg-c {
								width: 116rpx;
								height: 130rpx;
								background: #FFFFFF;
								border-radius: 14rpx;
								margin: 4rpx 6rpx;
								text-align: center;
								display: inline-block;

								.fw-dg-c-1 {
									width: 61rpx;
									height: 61rpx;
									margin-left: 30rpx;
									margin-top: 20rpx;
								}

								.fw-dg-c-2 {
									font-family: 'PingFang SC';
									font-style: normal;
									font-weight: 600;
									font-size: 18rpx;
									// line-height: 126.2%;
									letter-spacing: 0.4rpx;
									color: #372E25;
									margin-top: 14rpx;
								}
							}
						}
					}
				}
			}
		}

		.dljh {
			.dljh-t {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 24rpx 0 24rpx;

				.dljh-l {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 30rpx;
					line-height: 126.2%;
					letter-spacing: 0.4rpx;
				}

				.dljh-r {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 24rpx;
					line-height: 126.2%;
					text-align: right;
					letter-spacing: 0.4rpx;
					color: #979797;
				}
			}

			.evaluation-card-box {
				padding: 20rpx 34rpx 0 34rpx;

				.every-evaluation-card {
					width: 682rpx;
					height: 268rpx;
					background-size: 100% 100%;
					border-radius: 20rpx;

					.evaluationStatus {
						width: 120rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						color: #fff;
						font-size: 24rpx;
						border-radius: 16rpx 8rpx 8rpx 0rpx;
					}

					.card-information {
						margin-top: 20rpx;
						padding: 80rpx 42rpx 0 42rpx;

						.evaluation-title {
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 600;
							font-size: 28rpx;
							letter-spacing: 0.4rpx;
							color: #FFFFFF;
						}

						.appraisal-value {
							margin-top: 6rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.flzx {
			.flzx-t {
				display: flex;
				justify-content: space-between;
				padding: 50rpx 24rpx 0 24rpx;

				.flzx-l {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 30rpx;
					line-height: 126.2%;
					letter-spacing: 0.4rpx;
				}

				.flzx-r {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 24rpx;
					line-height: 126.2%;
					text-align: right;
					letter-spacing: 0.4rpx;
					color: #979797;
				}
			}

			.flzx-b {
				display: flex;
				justify-content: space-between;
				padding: 24rpx;

				.flzx-b-c {
					width: 344rpx;
					height: 420rpx;
					background: linear-gradient(180deg, #E9F3FC 0%, #F5F8FF 87.62%, #FFFFFF 97.92%);
					border-radius: 20rpx;
					padding: 20rpx 14rpx 0 14rpx;

					.flzx-b-c-1 {
						width: 314rpx;
						height: 238rpx;
						// background: url(https://static.bsyjk.cn/fuwu/7E415B6A265D49AC86B9703337B3E55C.png) no-repeat;
						// background-size: 100% 100%;
						border-radius: 25rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 800;
						font-size: 18rpx;
						line-height: 126.2%;
						text-align: center;
						letter-spacing: 0.4rpx;
						color: #979797;
					}

					.flzx-b-c-2 {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 600;
						font-size: 26rpx;
						line-height: 126.2%;
						letter-spacing: 0.4rpx;
						margin-top: 14rpx;
					}

					.flzx-b-c-3 {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 500;
						font-size: 18rpx;
						line-height: 126.2%;
						letter-spacing: 0.4rpx;
						color: #979797;
					}

					.flzx-b-c-4 {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0 44rpx;
						width: 236rpx;
						height: 54rpx;
						background: #FCE3BA;
						border-radius: 27px;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 600;
						font-size: 28rpx;
						line-height: 126.2%;
						text-align: center;
						letter-spacing: 0.4rpx;
						color: #634419;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>
